<template name="arrangements">
  <div class="ui modal">
  <i class="close icon"></i>
  <div class="header">
    {{current_user.realname}}
  </div>
  <div class="image content">
    <div class="ui medium image">
      <img src="/img/defaultheader.jpeg">
    </div>
    <div class="description">
      <div class="ui header">开始安排的{{current_user.realname}}的工作</div>
      <div class="ui form">
        <div class="field">
          <input class="userId" type="hidden" name="userId" value="{{current_user._id}}">
        </div>
        <div class="field">
          <input class="teamId" type="hidden" name="teamId" value="{{current_user.teamId}}">
        </div>
        <div class="field">
          <label for="">选择其工作区域</label>
          <select  class="areaId" name="">
              {{#each areas}}
                <option value="{{_id}}">{{title}}({{orderId}})</option>
              {{/each}}
          </select>
        </div>
        <div class="field">
          <label for="">选择其到岗时间</label>
          <input class="onTime" type="time">
        </div>
        <div class="field">
          <label for="">选择其离岗时间</label>
          <input class="offTime" type="time">
        </div>
        <div class="field">
          <label for="">选择其休息日</label>
          <div class="ui multiple selection dropdown">
            <!-- This will receive comma separated value like OH,TX,WY !-->
            <input class="dayOff" name="weekdays" type="hidden">
            <i class="dropdown icon"></i>
            <div class="default text">周日</div>
            <div class="menu">
              <div class="item" data-value="1">周一</div>
              <div class="item" data-value="2">周二</div>
              <div class="item" data-value="3">周三</div>
              <div class="item" data-value="4">周三</div>
              <div class="item" data-value="5">周四</div>
              <!-- Saving your scroll sanity !-->
              <div class="item" data-value="6">周五</div>
              <div class="item" data-value="7">周六</div>

            </div>
          </div>
        </div>
      </div>
      <p></p>
      <p></p>
    </div>
  </div>
  <div class="actions">
    <div class="ui black deny button">
      取消
    </div>
    <div data-id="{{current_user._id}}" class="ui positive right labeled icon button">
      保存
      <i class="checkmark icon"></i>
    </div>
  </div>
</div>
  <div class="ui segments container">
    <div class="ui segment">
      <h2>排班表</h2>
    </div>
    <div class="ui segment">
      <h3>没有被排班的团队成员：</h3>
      <div class="ui list">
        {{#each no_arranged_users}}
          <span data-id="{{_id}}" class="ui right icon blue button no-arranged">
            {{realname}}
            <i class="plus icon"></i>
          </span>
        {{/each}}
        <span></span>
      </div>
    </div>
    <div class="ui segment" style="height: auto;">
        <div class="ui {{areas_count}} column internally celled grid">
          <div class="row">
            <div class="column">时间</div>
            {{#each areas}}
              <div class="center algined column">{{orderId}}</div>
            {{/each}}



          </div>
          {{#each timeline in timelines}}
          <div class="row">
            <div class="column">{{timeline.begin}}~{{timeline.end}}</div>
            {{#each areas}}
              <div class="center algined column">

                {{#each arrangements_area _id timeline.begin timeline.end createdAt}}
                  <div style="background-color:{{getRandomColor createdAt}};
                  color:#ffffdf;;font-weight:bolder;text-align:center;
                  padding:5px;margin:2px;">
                    <i class="large remove icon" style="float: right; cursor:pointer;"></i>
                    <span>{{  getRealName userId }}</span><br/>
                    <span>{{parseTime onTime}}</span>~
                    <span>{{parseTime offTime}}</span>
                  </div>
                {{/each}}
              </div>
            {{/each}}
          </div>
          {{/each}}




        </div>
    </div>
  </div>
</template>
